<template>
    <div style="margin-bottom: 30px;">
        <el-input v-model="input" placeholder="请输入菜单名称" style="width: 200px;margin-right: 10px;" />
        <el-button type="primary">搜索</el-button>
        <el-button @click="input = ''">重置</el-button>
        
    </div>
    <div style="margin-bottom: 20px; display: flex;">
        <NewMenu />
        
        <NewSwitch/>
    </div>
    <div>
        <a-table :columns="columns"
         :data-source="menusAndSubPermissions"
          >
            <template #tags="{ text: type,record }" >
                <span @click="edit(record,type)">
                    <a-tag 
                        :color="type === 'menu' ? '#54C5CD' :'#E7AAE5' ">
                        {{ type==='menu'?'菜单':'按钮' }}
                    </a-tag>
                </span>

               
            </template>
            <template #action>
                <el-button>删除</el-button>
                <el-button type="primary">编辑</el-button>
                
            </template>
        </a-table>
        <!-- 按钮抽屉 -->
        <EditSwitch :record="falg" @closeModel="closeModel" v-if="hidden"></EditSwitch>
        <EditMenu :record="falg" @closeModel="closeModel1" v-if="hidden1"></EditMenu>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NewMenu from '../../component/NewMenu.vue'
import NewSwitch from '../../component/NewSwitch.vue'
import EditSwitch from '../../component/EditSwitch.vue'
import EditMenu from "../../component/EditMenu.vue"
const input = ref('')
let falg=ref('')
const hidden=ref(false)
const hidden1=ref(false)
const columns = [
    {
        title: '名称',
        dataIndex: 'title',
        key: 'name',
    },
    {
        title: '类型',
        dataIndex: 'type',
        key: 'type',
        slots: { customRender: 'tags' },
    },
    {
        title: '路由路径',
        dataIndex: 'path',
        key: 'path',
    },
    {
        title: '权限名称',
        dataIndex: 'permissionName',
        key: 'permissionName',
    },
    {
        title: '操作',
        dataIndex: '',
        key: 'x',
        slots: { customRender: 'action' }
    },
];


interface MenusAndSubPermission {
    id: string;//数据库id
    key: string;
    type: "menu" | "permission",//类型是菜单是按钮
    title: string;
    path?: string;//菜单路径
    icon?: string;//菜单左侧的图标名称
    permissionName: string;//对应的权限名称 、比如删除账号：permission对应
    children?: MenusAndSubPermission[];
    parentId?: string;//当有children时，必然有一个parentId
}


const menusAndSubPermissions: MenusAndSubPermission[] = [
    // { id: "0", key: "0", type: 'menu', title: "系统主页",

    {
        id: "1",
        key: "1",
        type: "menu",
        title: "组织管理",
        permissionName: "organization:view",
        icon: "",
        children: [
            {
                id: "1-1", key: "1-1", type: 'menu', title: "用户管理",
                path: "/nav/users",
                permissionName: "user:view",
                children: [
                    {
                        id: "1-1-1", key: "1-1-1", type:
                            "permission", title: "新增用户", permissionName: "user:add"
                    },
                    {
                        id: "1-1-2", key: "1-1-2", type:
                            "permission", title: "删除用户", permissionName: "user:del"
                    },
                    {
                        id: "1-1-3", key: "1-1-3", type:
                            "permission", title: "编辑用户", permissionName: "user:edit"
                    },
                ]
            },
            {
                id: "1-2", key: "1-2", type: 'menu', title: "角色管理",
                path: '/nav/roles', permissionName: "role:view"
            },
            {
                id: "1-3", key: "1-3", type: 'menu', title: "菜单管理",
                path: '/nav/menus', permissionName: "menu:view"
            },
        ]
    },
    {
        id: "2",
        key: "2",
        type: "menu",
        title: "靶场管理",
        permissionName: "labManage:view",
        icon: "",
        children: [
            {
                id: "2-1", key: "2-1", type: 'menu', title: "靶场列表",
                path: '/nav/labsList', permissionName: "lab:view",
                children: [
                    {
                        id: "2-1-1", key: "2-1-1", type: "permission",
                        title: "新增靶场", permissionName: "lab:add"
                    },
                    {
                        id: "2-1-2", key: "2-1-2", type: "permission",
                        title: "删除靶场", permissionName: "lab:del"
                    },
                    {
                        id: "2-1-3", key: "2-1-3", type: "permission",
                        title: "编辑靶场", permissionName: "lab:edit"
                    },
                ]
            }
        ]
    },
]

// 选中行
function edit(val:any,type:string){
    if (type=='permission') {
        hidden.value=true
        falg.value=val
    }else{
        hidden1.value=true
        falg.value=val
    }
}
// 关闭抽屉
function closeModel(val:boolean){
hidden.value=val
}
function closeModel1(val:boolean){
hidden1.value=val
}
// const rowSelection = {
//     onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
//         console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
//     },
//     onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
//         console.log(record, selected, selectedRows);
//     },
//     onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
//         console.log(selected, selectedRows, changeRows);
//     },
// };
</script>

<style lang="scss" scoped></style>